<template>
  <div>
  <div class="Main">
    <div style="margin-left: 180px;text-align:left;">
      <img width="40%" height="40%" style="margin-top: 50px" src="../assets/steamworks_logo.png"  />
      <div style="height:20px;"></div>
      <span class="text">Steamworks 是一整套工具与服务，能帮助游戏开发者与发行</span>
      <div style="height:10px;"></div>
      <span class="text">商构建游戏，并从在 Steam 上分发游戏中获得最佳效益。</span>
    </div>
    <div class="login" v-show="isShow" style="position: absolute;top: 80px;right: 120px;">
    <span class="logintitle">登录 Steamworks</span>
      <el-input
        placeholder="Steam 账号名称"
        v-model="username"
        clearable
        class="logininput"
      >
      </el-input>
      <div style="height: 30px;">&nbsp;</div>
      <el-input
        placeholder="密码"
        v-model="password"
        show-password
        class="logininput"
      >
      </el-input>
      <br/>
      <span style="float:left;margin-left: 10%;margin-bottom: 20px;font-size: 12px;">忘记你的密码？</span>
      <br/>
      <el-button type="primary" class="buttons" @click="Login()">登录</el-button>
      <br/>
      <el-button type="info" plain class="buttons"  @click="GotoRegister()">加入 Steamworks</el-button>
    </div>

    <div class="regist" v-show="!isShow" style="position: absolute;top: 80px;right: 120px;">
      <div style="font-size: 28px;margin-top: 30px;margin-left: 10%;text-align:left;">加入 Steamworks</div>
      <br/>
      <p >用您现有的 Steam 帐户登录 Steamworks。</p>
      <p style="margin-top: 10px">还没有 Steam 帐户？创建一个，轻松免费！</p>
      <el-button type="primary"  class="buttons" style="margin-top: 10%;" @click="toRegister" >创建 Steam 账户</el-button>
      <el-button type="info" plain class="buttons" style="margin-left: 0px;" @click="GotoLogin()">返&nbsp;回</el-button>
    </div>
    <div style="margin-top: 300px;">
      <img src="../assets/date.png" width="80%" height="80%" />
    </div>

  </div>
    <div style="background-color: #f9f9fb">
      <div style=";max-width: 1800px;margin: 0 auto;height:300px;padding: 10px 0;">
        <img width="30%" style="float:left;margin-left: 380px;" height="30%" src="../assets/steamworks_logo.png"/>
        <div>
          <span style="padding: 10px;">注册以通过 Steam 分销您的游戏</span>
          <br/>
          <span style="padding: 10px;">或 VR 体验。</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      msg: "这里是登录页面",
      username: "",
      password: "",
      isShow: true,
      returnValue: ''
    }
  },
  methods: {
    GotoRegister() {
      this.isShow = false;
    },
    GotoLogin() {
      this.isShow = true;
    },
    Login() {
      this.$axios.post('/login', {
        "UserName": this.username,
        "UserPwd": this.password
      }).then(res => {
        this.returnValue = res.data;
        if (res.data.code === 200) {
          // localStorage指的是本地存储，在vue项目里全局可用
          localStorage.setItem('TOKEN', this.returnValue.token);//保存数据到缓存
          this.$store.commit("Logout", this.returnValue);//传递用户数据到 vuex
          this.$router.push('/Welcome');//跳转
          this.$message.success(res.data.message);
        } else {
          // .error表示失败（红色），同样的好像还有： .info()、 .warning()详见官网
          this.$message.error(res.data.message);
        }
      })
    },
    toRegister() {
      this.$router.push('/New_register')
    }
  },
  filters: {},
  computed: {
    Sum() {
      return 100;
    }
  },
  components: {}

  }

</script>

<style scoped>
  .login{
    width:380px;
    height:346px;
    background-color:#000000;
    color:white;
    text-align:center;
  }
  .regist{
    width:380px;
    height:346px;
    background-color:white;
    border: 1px solid gray;
    color:black;
    text-align:center;
  }
  .logininput{
    width:80%;
  }
  .buttons{
    width:80%;
    margin-bottom: 10px;
  }
  .logintitle{
    float:left;
    margin-bottom: 18px;
    font-size: 28px;
    margin-top: 30px;
    margin-left: 10%;
  }
  .text{
    color:grey;
    font-size: 20px;
  }
  .Main{
  margin: 0 auto;
    max-width: 1800px;

  }
</style>
